<template>
    <div>
    <Header></Header>
    <Nav></Nav>
    <span class="headertitle">课题开课</span>
    <el-card class="box-card">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="活动名称">
          <el-input v-model="form.name" style="width: 500px;" placeholder="请输入"></el-input>
          <el-button style="margin-left: 30px;">搜索</el-button>
        </el-form-item>
      </el-form>
      <!-- 2 -->
      <el-form label-width="80px">
            <el-col :span="3">
                <el-form-item class="ktW" label="课题名称">
                      <el-input v-model="Munb1" placeholder="请输入"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="3">
                <el-form-item class="ktW" label="课题类别">
                    <el-input v-model="Munb2" placeholder="请输入"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="3">
                <el-form-item class="ktW" label="状态">
                    <el-input v-model="Munb3" placeholder="请输入"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="3">
                <el-form-item   class="ktW" label="研究领域">
                  <el-select v-model="region" placeholder="请选择">
                    <el-option label="选项一" value="shanghai"></el-option>
                    <el-option label="选项二" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-button type="primary" style="margin-left: 30px;">筛选</el-button>
              <el-button>清空</el-button>
        </el-form>
        <el-table
                  ref="multipleTable"
                  :data="tableData"
                  tooltip-effect="dark"
                  style="width: 100%"
                    >
             <el-table-column type="selection" width="55"></el-table-column>
             <el-table-column label="课题编号" width="120">
               <template slot-scope="scope">{{ scope.row.num1 }}</template>
             </el-table-column>
             <el-table-column prop="num2" label="课题名称" width="120"></el-table-column>
             <el-table-column prop="num3" label="负责人" width="150"></el-table-column>
             <el-table-column prop="num4" label="课题类别"></el-table-column>
             <el-table-column prop="num5" label="联系方式"></el-table-column>

             <el-table-column prop="num6" label="状态"></el-table-column>
             <el-table-column label="操作">
                <el-link type="primary" @click="dialogVisible2 = true">上传开题材料</el-link>
             </el-table-column>
             </el-table>
    </el-card>
    <!-- 上传材料 -->
    <el-dialog
          title="上传材料"
          :visible.sync="dialogVisible2"
          width="30%"
          >
             <el-upload
              class="upload-demo"
              drag
              action="https://jsonplaceholder.typicode.com/posts/"
              :file-list="fileList"
              multiple>
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">只能上传pdf文件，且不超过10M,上传的材料包括:保密协议、评审通知或评审要求</div>
            </el-upload>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible2 = false">保存</el-button>
            <el-button type="primary" @click="dialogVisible2 = false">提交</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<script>
import Header from '../Header.vue'
import Nav from '../Nav.vue'
export default {
    data(){
        return {
          form:{
            name:''
          },
          region:'',
          Munb1:'',
          Munb2:'',
          Munb3:'',
          tableData:[{
            num1:"20221217001",
            num2:"《古猿人进化史》",
            num3:"张三",
            num4:"历史文学",
            num5:"13577766667",
            num6:"待开题",
          },{
            num1:"20221217001",
            num2:"《古猿人进化史》",
            num3:"张三",
            num4:"历史文学",
            num5:"13577766667",
            num6:"待开题",
          }],
          dialogVisible2:false,
          fileList:
            [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'},
             {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
        }
    },
    components:{
    Header,
    Nav
  },
  methods:{}
}
</script>

<style lang="less" scoped>
    .box-card{
        width: 91%;
        float: right;
        margin-right: 1%;
        margin-top: -44%;
    }
body{
  position: relative;
}
.headertitle{
  position: absolute;
  top: 0;
  z-index: 999;
  margin-top: 20px;
  margin-left: 180px;
  font-size: 18px;
}
</style>